<template>
  <div class="MobileLogin">
    <van-image class="hot_icon" :src="require('@/assets/img/projectLogo.jpg')" fit="cover" />
    <div class="btnBox">
      <van-field v-model="phone" type="tel" clearable name="tel" placeholder="请输入手机号" round />
      <div class="getCode" @click="getCode()">
        <div class="box" v-show="isGetCode">
          获取验证码
        </div>
        <van-count-down ref="countDown" :time="120000" :auto-start="false" @finish="finish" v-show="!isGetCode" format="ss秒" />
      </div>
    </div>

    <van-field v-model="vcode" type="tel" clearable name="tel" placeholder="请输入验证码" round class="field" />

    <van-button type="primary" round class="loginBtn" color="#FF7733" :disabled="vcode.length!=6" @click="phoneLogin">登陆</van-button>
  </div>
</template>
<script>
import { Toast } from 'vant';

export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      phone: '',
      vcode: "",
      getmsg: true,
      isGetCode: true
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {
    //this.getWxCode()
  },
  methods: {
    //倒计时结束
    finish () {
      this.$refs.countDown.reset();
      this.isGetCode = true
    },
    //获取验证码
    getCode () {
      this.$refs.countDown.start();

      this.isGetCode = false
      this.$axios.post(this.$api.Sendvcode, {
        phone: this.phone
      }).then(res => {

        if (res.data.code != 1) {
          Toast.fail('获取验证码失败，请60s重新再试')

        }
      })
    },
    //登陆 
    phoneLogin () {
      let code = this.getUrlCode().code;
      let from_uid = sessionStorage.getItem('from_uid')

      //如果没有code 去获取code
      this.$axios.post(this.$api.Phonelogin, {
        phone: this.phone,
        code: code,
        vcode: this.vcode,
        from_uid: from_uid || null
      }).then(res => {

        if (res.data.code != 1) {
          Toast.fail('登陆失败 请稍后再试')

        } else {


          //sessionStorage.removeItem('url')
          this.$store.commit('settoken', res.data.data.token);
          this.getUserInfo()
          let share = JSON.parse(sessionStorage.getItem("share"))
          if (share) {

            this.$router.replace({
              name: share.name,
              query: {
                id: share.id
              }

            })
          } else {
            this.$router.replace('./')
          }


        }
      })

    },
    //请求个人信息数据
    getUserInfo () {

      this.$axios
        .get(this.$api.GetUserAllInfo)
        .then((res) => {

          if (res.data.data.data) {
            this.$store.commit('setUserInfo', res.data.data.data)
            this.userInfo = this.$store.state.userInfo
          }


        });
    },
    //截取code
    getUrlCode () { // 截取url中的code方法
      var url = location.search
      var theRequest = new Object()
      if (url.indexOf("?") != -1) {
        var str = url.substr(1)
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
        }
      }
      return theRequest
    }
  }
};
</script>
<style lang='less' scoped>
.MobileLogin {
  min-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.van-image {
  margin-top: 30px;
  width: 190px;
  height: 190px;
}
.van-field {
  background: #f6f6f6;
  width: 182px;
}
.btnBox1 {
  width: 285px;

  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #f6f6f6;
  margin-top: 12px;
}

.btnBox {
  width: 285px;
  margin-top: 40px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #f6f6f6;
  color: rgba(32, 29, 29, 0.6);
  .van-field {
    background: #f6f6f6;
    width: 182px;
  }
  .getCode {
    position: absolute;
    top: 0;
    right: 0;
    width: 102px;
    height: 100%;

    background: #f6f6f6;
    text-align: center;

    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      width: 100%;
      border-left: 1px solid rgba(32, 35, 39, 0.1);
      height: 22px;
      line-height: 22px;
    }
    color: rgba(32, 29, 29, 0.6);
  }
}
.van-button {
  width: 300px;
  margin-top: 36px;
}
.field {
  background: #f6f6f6;
  width: 285px;
  border-radius: 22px;
  margin-top: 12px;
}
</style>